<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>

        <div class="filter-item">
            <label for="">计划名称：</label>
            <el-input
                v-model="searchForm.planName"
                placeholder="请输入计划名称"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">巡检级别：</label>
            <el-select
                v-model="searchForm.inspectionLevel"
                class="m-2"
                placeholder="请选择巡检级别"
                style="width: 145px"
            >
                <el-option
                    v-for="item in inspectionLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">计划日期：</label>

            <el-date-picker
                style="width: 145px"
                v-model="searchForm.planDate"
                type="date"
                placeholder="请输入计划时间"
                :format="'YYYY-MM-DD'"
            />
        </div>
        <div class="filter-item">
            <label for="">巡检人员：</label>
            <el-input
                v-model="searchForm.inspectionUserName"
                placeholder="请输入巡检人员"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleAdd('add')"
            >新增计划</el-button>
        </div>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="depName"
            label="所属单位"
            width="80"
        />
        <el-table-column
            prop="planName"
            label="计划名称"
        />
        <el-table-column
            prop="inspectionInterval"
            label="巡检周期"
            width="80"
        />
        <el-table-column
            prop="inspectionLevel"
            label="巡检级别"
            width="80"
        />
        <el-table-column
            prop="inspectionEquipmentName"
            label="巡检设备"
            width="400"
        >
            <template #default="scope">

                <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="scope.row.inspectionEquipmentName"
                    placement="top-start"
                >
                    <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.inspectionEquipmentName }}</div>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column
            prop="inspectionUserName"
            label="巡检人"
        />
        <el-table-column
            prop="startDate"
            label="计划起止日期"
        >
            <template #default="scope">
                {{ scope.row.startDate }} - {{ scope.row.endDate }}
            </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="190"
        >
            <template #default="scope">
                <el-button
                    text
                    type="primary"
                    size="small"
                    style="margin-left: 0"
                    @click="handleClick('edit', scope.row)"
                >
                    编辑
                </el-button>
                <el-button
                    text
                    type="primary"
                    size="small"
                    style="margin-left: 0"
                    @click="handleClick('detail', scope.row)"
                >
                    详情
                </el-button>
                <el-button
                    text
                    type="primary"
                    size="small"
                    style="margin-left: 0"
                    @click="optionRecord(scope.row)"
                >
                    操作记录
                </el-button>
                <el-button
                    text
                    type="danger"
                    size="small"
                    style="margin-left: 0"
                    @click="handleDelete(scope.row)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100, 200]"
        s
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
    <el-dialog
        v-model="addVisible"
        :title="
            addVisibleType == 'add'
                ? '新增计划'
                : addVisibleType == 'edit'
                ? '编辑'
                : '详情'
        "
        width="940"
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
            :inline="true"
        >
            <el-form-item
                label="所属单位:"
                prop="depId"
                required
            >
                <el-select
                    v-model="ruleForm.depId"
                    class="m-2"
                    placeholder="请选择所属单位"
                    style="width: 145px"
                    :disabled="localTypeUnit != '1'"
                >
                    <el-option
                        v-for="item in newDepIdList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="计划名称:"
                prop="planName"
                required
            >
                <el-input
                    v-model="ruleForm.planName"
                    style="width: 300px"
                />
            </el-form-item>
            <el-form-item
                label="计划起止日期:"
                prop="planTime"
                required
            >
                <el-date-picker
                    style="width: 460px"
                    v-model="ruleForm.planTime"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :size="'default'"
                    :shortcuts="shortcuts"
                />
            </el-form-item>
            <!-- 
            <el-form-item label="" prop="name">
                <el-checkbox
                    v-model="searchForm.continuous"
                    label="连续"
                    size="large"
                />
            </el-form-item> -->
            <el-form-item
                label="巡检级别:"
                prop="inspectionLevel"
                required
            >
                <el-select
                    v-model="ruleForm.inspectionLevel"
                    placeholder=""
                    style="width: 300px"
                >
                    <el-option
                        label="一级"
                        value="一级"
                    />
                    <el-option
                        label="二级"
                        value="二级"
                    />
                    <el-option
                        label="三级"
                        value="三级"
                    />
                </el-select>
            </el-form-item>

            <el-form-item
                label="设置节假日:"
                prop="isHodiday"
            >
                <el-checkbox
                    v-model="ruleForm.isHodiday"
                    label="节假日正常巡检"
                    size="default"
                />
            </el-form-item>
            <el-form-item
                label="计划模式:"
                prop="planMode"
                required
            >
                <el-select
                    v-model="ruleForm.planMode"
                    placeholder=""
                    style="width: 300px"
                >
                    <!-- <el-option label="按班" value="按班" /> -->
                    <el-option
                        label="按天"
                        value="按天"
                    />
                    <el-option
                        label="按周"
                        value="按周"
                    />
                    <el-option
                        label="按月"
                        value="按月"
                    />
                    <el-option
                        label="按年"
                        value="按年"
                    />
                </el-select>
            </el-form-item>

            <el-form-item
                label="注:"
                required
            >
                按天计划不支持同时选择工作日和节假日
            </el-form-item>
            <el-form-item
                label=""
                prop=""
                style="width: 100%"
            >
                <div
                    class="modelItem"
                    v-if="ruleForm.planMode == '按班'"
                >
                    <el-radio-group v-model="classModelRadio">
                        <el-radio label="1">
                            <span class="radioItem">每</span>
                            <el-input
                                class="radioItem"
                                v-model="ruleForm.number"
                                style="width: 60px"
                            />
                            <span class="radioItem">班</span>
                        </el-radio>
                        <el-radio label="2">
                            <span class="radioItem">每个</span>
                            <el-select
                                v-model="ruleForm.classes"
                                placeholder=""
                                style="width: 180px"
                            >
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in classesShowList"
                                    :key="item.value"
                                />
                            </el-select>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div
                    class="modelItem"
                    v-if="ruleForm.planMode == '按天'"
                >
                    <el-radio-group v-model="classModelRadio">
                        <el-radio label="1">
                            <span class="radioItem">每</span>
                            <el-input
                                class="radioItem"
                                v-model="ruleForm.dayNumber"
                                style="width: 40px"
                            />
                            <span class="radioItem">天</span>
                        </el-radio>
                        <el-radio label="2">
                            <span class="radioItem">每个工作日</span>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div
                    class="modelItem"
                    v-if="ruleForm.planMode == '按周'"
                >
                    <span class="radioItem">每</span>
                    <el-input
                        class="radioItem"
                        v-model="ruleForm.weekNumber"
                        style="width: 40px"
                    />
                    <span class="radioItem">周的</span>
                    <el-checkbox-group
                        v-model="checkList"
                        style="display: inline-block"
                    >
                        <el-checkbox
                            label="星期一"
                            value="星期一"
                        />
                        <el-checkbox
                            label="星期二"
                            value="星期二"
                        />
                        <el-checkbox
                            label="星期三"
                            value="星期三"
                        />
                        <el-checkbox
                            label="星期四"
                            value="星期四"
                        />
                        <el-checkbox
                            label="星期五"
                            value="星期五"
                        />
                        <el-checkbox
                            label="星期六"
                            value="星期六"
                        />
                        <el-checkbox
                            label="星期日"
                            value="星期日"
                        />
                    </el-checkbox-group>
                </div>
                <div
                    class="modelItem"
                    v-if="ruleForm.planMode == '按月'"
                >
                    <el-radio-group v-model="classModelRadio">
                        <el-radio label="1">
                            <span class="radioItem">每</span>
                            <el-input
                                class="radioItem"
                                v-model="ruleForm.monthNumber"
                                style="width: 60px"
                            />
                            <span class="radioItem">个月的第</span>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.monthDayNumber"
                                placeholder=""
                                style="width: 60px"
                            >
                                <el-option
                                    :label="item"
                                    :value="item"
                                    v-for="item in 31"
                                    :key="item"
                                />
                                <el-option
                                    label="最后1"
                                    value="最后1"
                                />
                            </el-select>
                            <span class="radioItem">号</span>
                        </el-radio>
                        <el-radio label="2">
                            <span class="radioItem">每</span>
                            <el-input
                                class="radioItem"
                                v-model="ruleForm.monthNumber2"
                                style="width: 60px"
                            />
                            <span class="radioItem">个月的</span>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.weekNumber2"
                                placeholder=""
                                style="width: 90px"
                            >
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in weekNumberList"
                                    :key="item.value"
                                />
                            </el-select>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.weekday2"
                                placeholder=""
                                style="width: 90px"
                            >
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in weekList"
                                    :key="item.value"
                                />
                            </el-select>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div
                    class="modelItem"
                    v-if="ruleForm.planMode == '按年'"
                >
                    <el-radio-group v-model="classModelRadio">
                        <el-radio label="1">
                            <span class="radioItem">每年</span>

                            <el-select
                                class="radioItem"
                                v-model="ruleForm.yearMonthNumber"
                                placeholder=""
                                style="width: 60px"
                            >
                                <el-option
                                    :label="item"
                                    :value="item"
                                    v-for="item in 12"
                                    :key="item"
                                />
                            </el-select>
                            <span class="radioItem">月的第</span>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.yearMonthDayNumber"
                                placeholder=""
                                style="width: 60px"
                            >
                                <el-option
                                    :label="item"
                                    :value="item"
                                    v-for="item in 31"
                                    :key="item"
                                />
                                <el-option
                                    label="最后1"
                                    value="最后1"
                                />
                            </el-select>
                            <span class="radioItem">号</span>
                        </el-radio>
                        <el-radio label="2">
                            <span class="radioItem">每年</span>

                            <el-select
                                class="radioItem"
                                v-model="ruleForm.yearMonthNumber2"
                                placeholder=""
                                style="width: 60px"
                            >
                                <el-option
                                    :label="item"
                                    :value="item"
                                    v-for="item in 12"
                                    :key="item"
                                />
                            </el-select>
                            <span class="radioItem">月的</span>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.yearWeekNumber"
                                placeholder=""
                                style="width: 90px"
                            >
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in weekNumberList"
                                    :key="item.value"
                                />
                            </el-select>
                            <el-select
                                class="radioItem"
                                v-model="ruleForm.yearWeek"
                                placeholder=""
                                style="width: 90px"
                            >
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in weekList"
                                    :key="item.value"
                                />
                            </el-select>
                        </el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>

            <el-form-item
                label="巡检人员:"
                prop="inspectionUserMode"
                style="width: 450px"
                required
            >
                <el-radio-group
                    v-model="ruleForm.inspectionUserMode"
                    @change="inspectionUserModeChange"
                >
                    <el-radio label="当日值班班组">当日值班班组</el-radio>
                    <el-radio label="固定班组">固定班组</el-radio>
                    <el-radio label="固定人员">固定人员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label=""
                prop="inspectionUserValue"
                v-if="ruleForm.planMode != '按班'"
            >
                <el-select
                    v-model="ruleForm.inspectionUserValue"
                    :placeholder="`请选择`"
                    style="width: 200px"
                    multiple
                >
                    <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="item in typeList"
                        :key="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="填报/确认人数:"
                prop="reportPeoples"
                required
            >
                <el-select
                    v-model="ruleForm.reportPeoples"
                    :placeholder="`请选择`"
                    style="width: 200px"
                >
                    <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="item in reportPeoplesList"
                        :key="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-form>

        <div class="inspectionInfo">
            <div class="inspectionEq">
                <div class="inspectionP">
                    <span>设备巡检</span>
                    <div class="iconList">
                        <el-button
                            type="primary"
                            size="small"
                            @click="choiceEq"
                        >新增</el-button>
                    </div>
                </div>

                <el-scrollbar
                    height="200px"
                    class="projectContent"
                >
                    <div
                        class="projectItem"
                        v-for="(item, index) in eqList"
                        :key="item.name"
                        :class="
                            currentchooiceEqdataIndex == index ? 'active' : ''
                        "
                        @click="changeEqListItem(index)"
                    >
                        <div style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            {{ item.name }}
                        </div>
                        <div>
                            <el-icon
                                style="font-size: 16px; margin-right: 5px"
                                @click.stop="deleteProject(index)"
                            >
                                <Delete />
                            </el-icon>
                            <el-icon
                                style="font-size: 16px"
                                @click="choiceEq(item, index)"
                            >
                                <Edit />
                            </el-icon>
                        </div>
                    </div>
                </el-scrollbar>
            </div>

            <div class="inspectionProject">
                <div class="inspectionP">
                    <span>巡检项目</span>
                    <div class="iconList">
                        <el-button
                            type="primary"
                            size="small"
                            @click="addProject"
                        >新增</el-button>
                        <el-button
                            type="success"
                            size="small"
                            @click="saveProject"
                        >保存</el-button>
                    </div>
                </div>
                <el-scrollbar
                    height="200px"
                    class="projectContent"
                >
                    <div
                        class="projectItem"
                        v-for="(item, index) in projectList"
                        :key="index"
                    >
                        <el-input
                            class="radioItem"
                            v-model="item.name"
                            style="width: 550px"
                        />

                        <a style="width: 60px">
                            <el-button
                                type="danger"
                                size="small"
                                @click="deleteProjectContent(item, index)"
                            >删除</el-button>
                        </a>
                    </div>
                </el-scrollbar>
            </div>
        </div>

        <template #footer>
            <div
                class="dialog-footer"
                style="z-index: 999"
            >
                <el-button @click="addVisible = false">取消</el-button>
                <!-- <el-button @click="addVisible = false">中止</el-button> -->
                <el-button
                    v-if="addVisibleType !== 'detail'"
                    type="primary"
                    :disabled="isSubmiting"
                    @click="submitForm(ruleFormRef)"
                >
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog
        v-model="recordListVisible"
        title="操作记录"
        width="1000"
    >
        <div class="filter">
            <div class="filter-item">
                <label for="">操作时间：</label>
                <el-date-picker
                    style="width: 240px"
                    v-model="recordTime"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :size="'default'"
                    :shortcuts="shortcuts"
                />
            </div>
            <div class="filter-item">
                <el-button
                    size="default"
                    type="warning"
                    @click="searchRecord(currentRowRecord)"
                >查询</el-button>
            </div>
        </div>
        <el-table
            :data="recordList"
            style="width: 100%"
        >
            <el-table-column
                prop="operationType"
                label="操作类型"
            />
            <el-table-column
                prop="createTime"
                label="操作时间"
                width="160"
            />
            <el-table-column
                prop="comment"
                label="操作内容"
                width="560"
            />
            <el-table-column
                prop="operationRealname"
                label="操作人"
            />
        </el-table>
        <el-pagination
            v-model:current-page="recordPageNo"
            v-model:page-size="recordPageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalRecord"
            @size-change="handleSizeChangeRecord"
            @current-change="handleCurrentChangeRecord"
            class="paginationStyle"
        />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="recordListVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog
        v-model="rchoiceEqVisible"
        title="选择设备"
        width="1200"
        :destroy-on-close="true"
    >
        <ChooiceEq
            ref="chooiceEqRef"
            @dataChager="choiceEqdataChager"
            :currentdataList="currentchooiceEqdataList"
        ></ChooiceEq>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="chooiceEqRefCancel">取消</el-button>
                <el-button
                    type="primary"
                    @click="chooiceEqRefConfirm"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
import ChooiceEq from "./chooiceEq.vue";
const nowTime = new Date().getTime();
const day = new Date().getDay();
const oneDayTime = 24 * 60 * 60 * 1000;
const month = new Date().getMonth();
let searchForm = reactive({
    depId: "",
    planName: "",
    planDate: "",
    inspectionLevel: "",
    inspectionUserName: "",
    pageNo: 1,
    pageSize: 10,
});
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const reportPeoplesList = ref([
    { label: "1人", value: "1" },
    { label: "2人", value: "2" },
    { label: "3人", value: "3" },
    { label: "4人", value: "4" },
    { label: "5人", value: "5" },
    { label: "6人", value: "6" },
    { label: "7人", value: "7" },
    { label: "8人", value: "8" },
    { label: "9人", value: "9" },
    { label: "10人", value: "10" },
]);
const inspectionLevelList = ref([
    { label: "全部", value: "" },
    { label: "一级", value: "一级" },
    { label: "二级", value: "二级" },
    { label: "三级", value: "三级" },
]);
const newDepIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;

const shortcuts = [
    {
        text: "本年",
        value: () => {
            return [
                moment().startOf("year"),
                moment().endOf("year"),
            ];
        },
    },
    {
        text: "本月",
        value: () => {
            return [
                moment().startOf("month"),
                moment().endOf("month"),
            ];
        },
    },
    {
        text: "下月",
        value: () => {
            return [
                moment().add(1, 'month').startOf("month"),
                moment().add(1, 'month').endOf("month"),
            ];
        },
    },
    {
        text: "本周",
        value: () => {
            return [
                moment().startOf("week"),
                moment().endOf("week"),
            ];
        },
    },
    {
        text: "下周",
        value: () => {
            return [
                moment().add(1, 'week').startOf("week"),
                moment().add(1, 'week').endOf("week"),
            ];
        },
    },
    {
        text: "本日",
        value: () => {
            return [
                moment(),
                moment(),
            ];
        },
    },
];
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
const tableData = ref([]);
const addVisible = ref(false);
const addVisibleType = ref("add");
const recordListVisible = ref(false);
const rchoiceEqVisible = ref(false);
const search = async () => {
    let params = {
        ...searchForm,
        planDate: searchForm.planDate
            ? moment(searchForm.planDate).format("YYYY-MM-DD")
            : "",
    };
    const res = await schedulingHttp.inspectionPlanQueryPlan(params);
    if (res.data.code == "200") {
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
    }
    console.log(res);
};
const reset = () => {
    searchForm.depId = localTypeUnit.value;
    searchForm.planName = "";
    searchForm.planDate = "";
    searchForm.inspectionUserName = "";
    searchForm.inspectionLevel = "";
    searchForm.pageNo = 1;
    searchForm.pageSize = 10;
    search();
};
const handleClick = async (type, row) => {
    addVisible.value = true;
    addVisibleType.value = type;
    const res = await schedulingHttp.inspectionPlanGetById(row);
    if (res.data.code == "200") {
        ruleForm.id = res.data.data.id + "";
        ruleForm.depId = res.data.data.depId + "";
        ruleForm.planName = res.data.data.planName + "";
        ruleForm.planTime = [res.data.data.startDate, res.data.data.endDate];
        ruleForm.inspectionLevel = res.data.data.inspectionLevel;
        ruleForm.isHodiday = res.data.data.isHodiday == "1";
        ruleForm.planMode = res.data.data.planMode;
        ruleForm.planModeNum = res.data.data.planModeNum;
        ruleForm.reportPeoples = res.data.data.reportPeoples + '';
        classModelRadio.value = res.data.data.planModeNum + "";
        ruleForm.planModeItem = JSON.parse(res.data.data.planModeItem);
        console.log(ruleForm.planModeItem);

        // ruleForm.inspectionUser = "";
        if (res.data.data.planMode == "按班") {
            if (classModelRadio.value == "1") {
                ruleForm.number = ruleForm.planModeItem[0];
            } else if (classModelRadio.value == "2") {
                ruleForm.classes = ruleForm.planModeItem[0] + "";
            }
        } else if (res.data.data.planMode == "按天") {
            if (classModelRadio.value == "1") {
                ruleForm.dayNumber = ruleForm.planModeItem[0];
            }
        } else if (res.data.data.planMode == "按周") {
            ruleForm.weekNumber = ruleForm.planModeItem[0];
            ruleForm.planModeItem.shift();
            checkList.value = ruleForm.planModeItem;
            console.log(ruleForm.weekNumber, checkList.value);
        } else if (res.data.data.planMode == "按月") {
            if (classModelRadio.value == "1") {
                ruleForm.monthNumber = ruleForm.planModeItem[0];
                ruleForm.monthDayNumber = ruleForm.planModeItem[1];
            } else if (classModelRadio.value == "2") {
                ruleForm.monthNumber2 = ruleForm.planModeItem[0];
                ruleForm.weekNumber2 = ruleForm.planModeItem[1];
                ruleForm.weekday2 = ruleForm.planModeItem[2];
            }
        } else if (res.data.data.planMode == "按年") {
            if (classModelRadio.value == "1") {
                ruleForm.yearMonthNumber = ruleForm.planModeItem[0];
                ruleForm.yearMonthDayNumber = ruleForm.planModeItem[1];
            } else if (classModelRadio.value == "2") {
                ruleForm.yearMonthNumber2 = ruleForm.planModeItem[0];
                ruleForm.yearWeekNumber = ruleForm.planModeItem[1];
                ruleForm.yearWeek = ruleForm.planModeItem[2];
            }
        }
        ruleForm.inspectionUserMode = res.data.data.inspectionUserMode;
        ruleForm.inspectionUser = res.data.data.inspectionUser + "";
        ruleForm.inspectionUserValue = [];
        ruleForm.inspectionUser.split(",").forEach((item) => {
            ruleForm.inspectionUserValue.push(item);
        });
        // ruleForm.inspectionUserValue = ruleForm.inspectionUser.split(",");
        console.log(ruleForm.inspectionUserValue);
        ruleForm.detailList = res.data.data.detailList;
        console.log(ruleForm.detailList, "ruleForm.detailList.value");
        eqList.value = [];
        projectList.value = [];
        ruleForm.detailList.forEach((item) => {
            let projectListArr = [];
            let listArr = [];
            item.inspectionItemList.forEach((m) => {
                projectListArr.push({
                    name: m,
                });
            });
            item.inspectionEquipmentIds.forEach((m) => {
                listArr.push({
                    id: m,
                });
            });
            eqList.value.push({
                inspectionEquipmentNames: item.inspectionEquipmentNames,
                name:
                    item.inspectionEquipmentNames +
                    ` (${item.inspectionEquipmentIds.length})`,
                list: listArr,
                projectList: projectListArr,
            });
        });
        currentchooiceEqdataIndex.value = 0;
        projectList.value = eqList.value[0].projectList;
    }
};
const handleDelete = (row) => {
    ElMessageBox.confirm(
        `是否删除该计划【计划名称：${row.planName}】？`,
        "删除",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            schedulingHttp.inspectionPlanDeletePlan(row).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    ElMessage({
                        message: "删除成功",
                        type: "success",
                    });
                    search();
                } else {
                    ElMessage({
                        message: "删除失败！",
                        type: "error",
                    });
                }
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
const ruleFormRef = ref();
const handleClose = () => { };
const handleAdd = (type) => {
    addVisible.value = true;
    addVisibleType.value = type;
    ruleForm.id = "";
    ruleForm.depId = localTypeUnit.value;
    ruleForm.planName = "";
    ruleForm.inspectionLevel = "一级";
    ruleForm.isHodiday = "";
    ruleForm.planTime = [];
    ruleForm.planMode = "按天";
    ruleForm.planModeNum = "";
    ruleForm.planModeItem = [];
    ruleForm.inspectionUserMode = "";
    ruleForm.inspectionUser = "";
    ruleForm.inspectionUserValue = [];
    ruleForm.reportPeoples = '';
    eqList.value = [];
    projectList.value = [];
};

const typeList = ref([]);
let ruleForm = reactive({
    id: "",
    depId: "",
    planName: "",
    inspectionLevel: "一级",
    isHodiday: "",
    planTime: [],
    planMode: "按天",
    planModeNum: "",
    planModeItem: [],
    number: "1",
    classes: "",
    dayNumber: "1",
    weekNumber: "1",
    monthNumber: "1",
    monthDayNumber: "1",
    monthNumber2: "1",
    weekNumber2: "第一个",
    weekday2: "星期一",
    yearMonthNumber: "1",
    yearMonthDayNumber: "1",
    yearMonthNumber2: "1",
    yearWeekNumber: "第一个",
    yearWeek: "星期一",
    inspectionUserMode: "",
    inspectionUser: "",
    inspectionUserValue: [],
    reportPeoples: '',
    detailList: [],
});

const rules = reactive({
    depId: [
        {
            required: true,
            message: "请输入所属单位",
            trigger: "blur",
        },
    ],
    planName: [
        {
            required: true,
            message: "请输入计划名称",
            trigger: "blur",
        },
    ],
    planTime: [
        {
            required: true,
            message: "请输入计划起止日期",
            trigger: "blur",
        },
    ],
    inspectionLevel: [
        {
            required: true,
            message: "请选择巡检级别",
            trigger: "blur",
        },
    ],
    planMode: [
        {
            required: true,
            message: "请选择计划模式",
            trigger: "blur",
        },
    ],
    inspectionUserMode: [
        {
            required: true,
            message: "请选择巡检人员",
            trigger: "blur",
        },
    ],
    reportPeoples: [
        {
            required: true,
            message: "请选择",
            trigger: "blur",
        },
    ],
});
ruleForm.depId = localTypeUnit.value;
const classModelRadio = ref("1");
const checkList = ref([]);
watch(
    () => ruleForm.depId,
    (val) => {
        getWorkClassQueryWorkClassShow();
        getWorkteamsQueryWorkTeams();
        userQueryUserList();
    },
    { deep: true }
);
watch(
    () => ruleForm.planMode,
    (val) => {
        // classModelRadio.value = "1";
        if (ruleForm.planMode == "按班") {
            ruleForm.inspectionUser = "";
            ruleForm.inspectionUserValue = [];
        }
    },
    { deep: true }
);
watch(typeList, (val) => {
    console.log(val, "ruleForm.inspectionUserMode");
});
watch(
    () => ruleForm.inspectionUserMode,
    (val) => {
        // ruleForm.inspectionUser = "";
        if (val == "当日值班班组") {
            typeList.value = classesShowList.value;
        } else if (val == "固定班组") {
            typeList.value = groupList.value;
        } else if (val == "固定人员") {
            typeList.value = userList.value;
        }
    },
    { deep: true }
);
const inspectionUserModeChange = () => {
    ruleForm.inspectionUser = "";
    ruleForm.inspectionUserValue = [];
};
const weekNumberList = ref([
    {
        value: "第一个",
        label: "第一个",
    },
    {
        value: "第二个",
        label: "第二个",
    },
    {
        value: "第三个",
        label: "第三个",
    },
    {
        value: "第四个",
        label: "第四个",
    },
    {
        value: "最后一个",
        label: "最后一个",
    },
]);
const weekList = ref([
    {
        value: "星期一",
        label: "星期一",
    },
    {
        value: "星期二",
        label: "星期二",
    },
    {
        value: "星期三",
        label: "星期三",
    },
    {
        value: "星期四",
        label: "星期四",
    },
    {
        value: "星期五",
        label: "星期五",
    },
    {
        value: "星期六",
        label: "星期六",
    },
    {
        value: "星期日",
        label: "星期日",
    },
]);
const eqList = ref([]);
const projectList = ref([]);
const addProject = () => {
    projectList.value.push({ name: "" });
};
const saveProject = () => {
    eqList.value[currentchooiceEqdataIndex.value].projectList =
        projectList.value;
};
const deleteProject = (index) => {
    eqList.value.splice(index, 1);
    console.log(eqList.value.length, "eqList.value.length");
    if (eqList.value.length > 0) {
        currentchooiceEqdataIndex.value = 0;
        projectList.value = eqList.value[0].projectList;
    } else {
        currentchooiceEqdataIndex.value = "-1";
        projectList.value = [];
    }
};
const deleteProjectContent = (item, index) => {
    if (projectList.value.length > 1) {
        projectList.value.splice(index, 1);
    } else {
        ElMessage({
            type: "warning",
            message: "请至少保留一项！",
        });
    }
    console.log(eqList.value.length, "eqList.value.length");
};

const currentchooiceEqdataList = ref([]);
const currentchooiceEqdataIndex = ref("-1");
const chooiceEqRef = ref(null);
const choiceEqdataChager = (val) => {
    console.log(val);
    currentchooiceEqdataList.value = val;
};
const chooiceEqRefCancel = (val) => {
    console.log(val);
    rchoiceEqVisible.value = false;
    currentchooiceEqdataList.value = [];
};
const chooiceEqRefConfirm = (val) => {
    console.log(currentchooiceEqdataIndex.value);
    rchoiceEqVisible.value = false;
    if (currentchooiceEqdataIndex.value == "-1") {
        eqList.value.push({
            inspectionEquipmentNames:
                currentchooiceEqdataList.value[0].facilityName,
            name:
                currentchooiceEqdataList.value[0].facilityName +
                `(${currentchooiceEqdataList.value.length})`,
            list: currentchooiceEqdataList.value,
            projectList: [{ name: "" }],
        });
        projectList.value = eqList.value[eqList.value.length - 1].projectList;
        currentchooiceEqdataIndex.value = eqList.value.length - 1;
        console.log(eqList.value[eqList.length - 1], "projectList");
    } else {
        eqList.value[currentchooiceEqdataIndex.value] = {
            inspectionEquipmentNames:
                currentchooiceEqdataList.value[0].facilityName,
            name:
                currentchooiceEqdataList.value[0].facilityName +
                `(${currentchooiceEqdataList.value.length})`,
            list: currentchooiceEqdataList.value,
            projectList: projectList.value,
        };
        console.log(eqList, "eqList");
        // projectList.value = eqList.value[eqList.value.length - 1].projectList;
    }
};
const choiceEq = (item, index) => {
    console.log(item, index);
    rchoiceEqVisible.value = true;
    if (index >= 0) {
        currentchooiceEqdataList.value = item;
        currentchooiceEqdataIndex.value = index;
    } else {
        currentchooiceEqdataList.value = [];
        currentchooiceEqdataIndex.value = "-1";
    }
};
const changeEqListItem = (index) => {
    currentchooiceEqdataIndex.value = index;
    projectList.value =
        eqList.value[currentchooiceEqdataIndex.value].projectList;
};
const classesShowList = ref([]);
// 查询班次信息
const getWorkClassQueryWorkClassShow = async () => {
    let params = {
        depId: ruleForm.depId,
        classType: "1",
        isDelete: "0",
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await schedulingHttp.workClassQueryWorkClass(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.className;
            item.shortLabel = item.classShortName + "";
            item.value = item.id + "";
            item.statusTrigger = false;
        });
        classesShowList.value = res.data.data.records;

        if (ruleForm.inspectionUserMode == "当日值班班组") {
            typeList.value = classesShowList.value;
        }
    }
};
const userList = ref([]);
const userQueryUserList = async () => {
    let params = {
        depId: ruleForm.depId,
        isDelete: 0,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await userHttp.userQueryUserList(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.realName;
            item.value = item.id + "";
        });
        userList.value = res.data.data.records;
        if (ruleForm.inspectionUserMode == "固定人员") {
            typeList.value = userList.value;
        }
    }
};
const groupList = ref([]);
// 查询班组信息
const getWorkteamsQueryWorkTeams = async () => {
    let params = {
        depId: ruleForm.depId,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await schedulingHttp.workteamsQueryWorkTeams(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.teamName;
            item.value = item.id + "";
        });
        groupList.value = res.data.data.records;
        if (ruleForm.inspectionUserMode == "固定班组") {
            typeList.value = groupList.value;
        }
    }
};
const isSubmiting = ref(false);
const submitForm = async (formEl) => {
    if (!formEl) return;

    isSubmiting.value = true;
    ruleForm.inspectionUser = ruleForm.inspectionUserValue.join(",");
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            ruleForm.planModeNum = classModelRadio.value;
            ruleForm.planModeItem = [];
            console.log(classModelRadio.value);
            if (ruleForm.planMode == "按班") {
                if (classModelRadio.value == "1") {
                    ruleForm.planModeItem.push(ruleForm.number);
                } else if (classModelRadio.value == "2") {
                    ruleForm.planModeItem.push(ruleForm.classes);
                }
            } else if (ruleForm.planMode == "按天") {
                if (classModelRadio.value == "1") {
                    ruleForm.planModeItem.push(ruleForm.dayNumber);
                } else if (classModelRadio.value == "2") {
                    ruleForm.planModeItem.push("1");
                }
            } else if (ruleForm.planMode == "按周") {
                let arr = [];
                arr.push(ruleForm.weekNumber);
                ruleForm.planModeItem = arr.concat(checkList.value);
            } else if (ruleForm.planMode == "按月") {
                if (classModelRadio.value == "1") {
                    ruleForm.planModeItem.push(ruleForm.monthNumber);
                    ruleForm.planModeItem.push(ruleForm.monthDayNumber);
                } else if (classModelRadio.value == "2") {
                    ruleForm.planModeItem.push(ruleForm.monthNumber2);
                    ruleForm.planModeItem.push(ruleForm.weekNumber2);
                    ruleForm.planModeItem.push(ruleForm.weekday2);
                }
            } else if (ruleForm.planMode == "按年") {
                if (classModelRadio.value == "1") {
                    ruleForm.planModeItem.push(ruleForm.yearMonthNumber);
                    ruleForm.planModeItem.push(ruleForm.yearMonthDayNumber);
                } else if (classModelRadio.value == "2") {
                    ruleForm.planModeItem.push(ruleForm.yearMonthNumber2);
                    ruleForm.planModeItem.push(ruleForm.yearWeekNumber);
                    ruleForm.planModeItem.push(ruleForm.yearWeek);
                }
            }
            ruleForm.detailList = [];
            console.log(eqList.value, "eqList.value");
            eqList.value.forEach((item) => {
                let eqIds = [];
                let projectNames = [];
                item.list.forEach((m) => {
                    eqIds.push(m.id);
                });
                item.projectList.forEach((m) => {
                    projectNames.push(m.name);
                });
                ruleForm.detailList.push({
                    inspectionEquipmentIds: eqIds,
                    inspectionItemList: projectNames,
                    inspectionEquipmentNames: item.inspectionEquipmentNames,
                });
            });
            let params = {
                ...ruleForm,
                startDate: moment(ruleForm.planTime[0]).format("YYYY-MM-DD"),
                endDate: moment(ruleForm.planTime[1]).format("YYYY-MM-DD"),
                isHodiday: ruleForm.isHodiday == true ? "1" : "0",
                // inspectionEquipmentIds: eqList
            };
            if (addVisibleType.value == "add") {
                const res = await schedulingHttp.inspectionPlanAddPlan(params);
                console.log(res);
                if (res.data.code == 200) {
                    addVisible.value = false;
                    search();
                    ElMessage({
                        message: "提交成功",
                        type: "success",
                    });
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
                isSubmiting.value = false;
            } else if (addVisibleType.value == "edit") {
                const res = await schedulingHttp.inspectionPlanEditPlan(params);
                console.log(res);
                if (res.data.code == 200) {
                    addVisible.value = false;
                    search();
                    ElMessage({
                        message: "修改成功",
                        type: "success",
                    });
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
                isSubmiting.value = false;
            }
        } else {
            ElMessage({
                message: "提交错误",
                type: "error",
            });
            isSubmiting.value = false;
        }
    });
};
const recordTime = ref([]);
const recordList = ref([]);
const currentRowRecord = ref();
const optionRecord = async (row) => {
    recordListVisible.value = true;
    currentRowRecord.value = row;
    recordTime.value[0] = moment().format("YYYY-MM-DD");
    recordTime.value[1] = moment().add(1, "day").format("YYYY-MM-DD");
    searchRecord(currentRowRecord.value);
};
const recordPageNo = ref(1);
const recordPageSize = ref(10);

let totalRecord = ref(0);
const handleSizeChangeRecord = (val) => {
    recordPageSize.value = val;
    searchRecord(currentRowRecord.value);
};
const handleCurrentChangeRecord = (val) => {
    recordPageNo.value = val;
    searchRecord(currentRowRecord.value);
};
const searchRecord = async (row) => {
    let params = {
        businessId: row.id,
        operationType: "",
        businessType: "设备巡检",
        startTime:
            recordTime.value.length > 0
                ? moment(recordTime.value[0]).format("YYYY-MM-DD")
                : "",
        endTime:
            recordTime.value.length > 0
                ? moment(recordTime.value[1]).format("YYYY-MM-DD")
                : "",
        pageNo: recordPageNo.value,
        pageSize: recordPageSize.value,
    };
    const res = await schedulingHttp.operationRecordsQueryOperationRecords(
        params
    );
    console.log(res);
    if (res.data.code == 200) {
        recordList.value = res.data.data.records;
        totalRecord.value = res.data.data.total;
    }
};
onMounted(() => {
    getWorkClassQueryWorkClassShow();
    getWorkteamsQueryWorkTeams();
    userQueryUserList();
    search();
});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.radioItem {
    margin-right: 10px;
}
.modelItem {
    padding-left: 110px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.inspectionInfo {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #ccc;
    .inspectionEq {
        width: 248px !important;
        border-right: 1px solid #ccc;
    }
    .inspectionProject {
        width: 600px;
    }
    .inspectionP {
        display: flex;
        flex-direction: row;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        span {
            line-height: 3;
        }
    }

    .iconList {
        display: inline-block;
        width: 100px;
        height: 32px;
        box-sizing: border-box;
        text-align: center;
        padding: 1px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .projectContent {
        height: 200px;
        padding: 0 20px;
        box-sizing: border-box;
        .projectItem {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 5px;
            background: #fff;
            &.active {
                background: #ddd;
            }
        }
    }
}
</style>